<template>
  <main>
    <div class="rooms">
      <div class="headerBar">
        <div class="headerName"><span>服务器房间</span></div>
        <div class="headerButton">
          <div @click="searchRooms"><span>搜索</span></div>
          <div @click="refreshRooms"><span>刷新</span></div>
          <div @click="createRoom"><span>创建房间</span></div>
          <div><router-link to="/gameAi"><span>人机对战</span></router-link></div>
        </div>
      </div>
      <div class="container">
        <div class="roomItem" v-for="(item,index) in roomsData.data" :key = index>
          <div class="itemInfo">
            <div><span>房间名：</span><span class="active">{{item.roomName}}</span></div>
            <div><span>对战人数：</span><span class="active">{{item.gamers}}</span></div>
            <div><span>观战人数：</span><span class="active">{{item.watchers}}</span></div>
            <div><span>创建时间：</span><span class="active">{{item.startTime}}</span></div>
          </div>
          <div class="itemButton">
            <div @click="joinRoomToPlay"><router-link to="/gamePerson"><span>加入</span></router-link></div>
            <div @click="joinRoomToWatch"><router-link to="gameWatch"><span>观战</span></router-link></div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script setup>

import {reactive} from "vue";

const roomsData = reactive({
  data: [{
    id:'011111',
    roomName: '唱跳rap',
    gamers: 2,
    watchers: 0,
    startTime: "2024-6-6"
    },
    {
      id:'0112111',
      roomName: '唱跳rap',
      gamers: 2,
      watchers: 0,
      startTime: "2024-6-6"
    }],
});
const joinRoomToPlay = ()=>{

}
const joinRoomToWatch = ()=>{

}
const refreshRooms = ()=>{

}
const searchRooms = () =>{

}
const createRoom = () =>{

}

</script>
<style lang="less" scoped>
@shadow-color: #f3d19e;
@header-name-color: #eebe77;
@header-button-hover: #faecd8;
@room-item: #f8e3c5;
@button-name-color: #b88230;

main{
  width: 60rem;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;

  .rooms{
    height: 100%;
    width: 60rem;
    box-shadow:  0 5px 5px @shadow-color;

    .headerBar{
      height: 3rem;
      width: 100%;
      box-shadow: 0 0 5px @shadow-color;
      padding:0 0 0 1rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .headerName{
        font-size: 1.2rem;
        font-weight: 600;
        font-family: 微软雅黑;
        color: @header-name-color;
      }
      .headerButton{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        div{
          height: 100%;
          width: 15%;
          text-align: center;
          cursor: pointer;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          span{
            color: @header-name-color;
            font-size: 0.8rem;
            font-weight: 300;
          }
        }
        div:hover{
          background-color: @header-button-hover;
        }
      }
    }
    .container{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;

      .roomItem{
        height: 6rem;
        width: 10rem;
        padding: 0.25rem 0.5rem;
        font-weight: 300;
        font-size: 0.75rem;
        color: #b88230;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 3px @room-item;
        border-radius: 10px;

        .active{
          color: #b88230;
          font-weight: 500;
        }
        .itemInfo{
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
        }
        .itemButton{
          height: 100%;
          width: 20%;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          font-weight: 600;

          span{
            color: @button-name-color;
          }
          div{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 1.5rem;
            width: 2.5rem;
            text-align: center;
            border-radius: 5px;
            background-color: #fdf6ec;
          }
          div:hover{
            background-color: @header-button-hover;
          }
        }
      }
      //.roomItem:hover{
      //  background-color: #fdf6ec;
      //}
    }
  }
}
</style>